
if ( Skt.config.USE_UI ) {

	$("#tools").draggable({containment:"parent"});
	
//	$("#editor").droppable({
//    	  hoverClass: 'canvas-hover',
//    	  accept: '.student-li',
//    	  drop: function(event, ui) {
//    		  var userId = ui.draggable[0].dataset.id;
//    		  var room = Skt.sketchpad.getCurrentCanvas().getRoom();
//    		  var moderator = room.getRoomModerator();
//    		  
//    		  if ( room.getType() == 'screen' ) {
//    			  if ( userId != room.getOwnerId() ) {
//	    			  if ( Skt.user.id == userId ) {
//	    				  Skt.user_list.issueRequest(userId);
//	    			  } else if ( Skt.user.id == room.getOwnerId() ) {
//	    	    		  moderator.requestEditorAddition(Skt.user.id, userId);
//	    	    		  Skt.user_list.dismissRequest(userId);
//	    			  }
//    			  }
//    		  } else {
//    			  alert('Requests for permission to edit slides can only be issued on screen slides');
//    		  }
//    		  
//    	  }
//    });

	$("#students_ul").children("li").draggable({
		appendTo : "body",
		helper : "clone",
		revert : "invalid",
		zIndex : 1000,
		start : function(e, ui) {
			
			
			$(ui.helper).addClass("draggableText");
			
			var userId = ui.helper[0].dataset.id;
			var room = (Skt.sketchpad.getCurrentCanvas() != null ? Skt.sketchpad.getCurrentCanvas().getRoom() : null);
			
			if ( room != null && room.getType() == 'screen' ) {
				var moderator = room.getRoomModerator();
				if ( !moderator.canEdit(userId) && (Skt.user.type == 'teacher' || userId == Skt.user.id) )
					Skt.ui.show_editzones();
			}
			
		},
		stop: function(e, ui) {
			Skt.ui.hide_editzones();
		}
	});

//	$('#students_ul').children('li').droppable({
//		accept : '#rooms_question .room',
//		hoverClass : 'dropableGroup',
//		drop : function(event, ui) {
//			alert('Not implemented yet');
//		}
//	});

	$("#delete-zone").droppable({
		hoverClass : "icon-dropzone-red-hover",
		drop : function(event, ui) {
			if ( ( ui.draggable.data("type") == 'screen' || ui.draggable.data("type") == "question" ) && Skt.user.type !== 'teacher' )
				return alert('You don\'t have permission to delete this slide');
			var confirmation = confirm("Are you sure you want to delete this slide?");
			if ( confirmation == true ) {
				var roomId = ui.draggable.data("room");
				setTimeout(function() {
					Skt.sketchpad.removeRoom(roomId);
				}, 4);
				Skt.delete_action = 1;
			}
		}
	});
	
	$('#edit-request-zone').droppable({
		hoverClass : "icon-dropzone-green-hover",
		accept: '.student-li',
		drop : function(event, ui) {
			var userId = ui.draggable[0].dataset.id;
			var room = (Skt.sketchpad.getCurrentCanvas() != null ? Skt.sketchpad.getCurrentCanvas().getRoom() : null);
			
			if ( room != null && room.getType() == 'screen' ) {
				var moderator = room.getRoomModerator();
				if ( userId != room.getOwnerId() ) {
	    			  if ( Skt.user.id == userId ) {
	    				  Skt.user_list.issueRequest(userId);
	    			  } else if ( Skt.user.id == room.getOwnerId() ) {
	    	    		  moderator.requestEditorAddition(Skt.user.id, userId);
	    	    		  Skt.user_list.dismissRequest(userId);
	    			  }
			  }
			}
  		  
		}
	});

	Skt.ui.disable_sortable_room_list = function(list_id) {
		$("#" + list_id).sortable("disable");
	};

	Skt.ui.enable_sortable_room_list = function(list_id) {
		$("#" + list_id).sortable("enable");
	};

	Skt.ui.remove_draggable_room_list = function(list_id) {
		$("#" + list_id).children("li").draggable('destroy').droppable('destroy');
	};
	
	var create_sortable_room_list = function (list_id) {
		$("#"+list_id).sortable({
			appendTo: "body",
			helper: "clone",
			placeholder: "room-placeholder",
			connectWith: ".icon-dropzone",
	      
			start: function (event, ui) {
				Skt.delete_action = 0;
				var side = ui.item.parent().data("side");
				Skt.ui.show_dropzones(side);
				var old_index = ui.item.index();
				ui.item.data("old_index",old_index);
			},
	      
			stop: function (event, ui) {
				Skt.ui.hide_dropzones();
				var old_index = ui.item.data("old_index");
				var new_index = ui.item.index();
				if( new_index != -1 && new_index != old_index && Skt.delete_action == 0) {
					var roomId = ui.item.data("room");
					setTimeout( function() { Skt.sketchpad.moveRoom(roomId, old_index, new_index); } , 4 );
				}
				return false;
			}
		});	
		
        $("#"+list_id).sortable("disable");
	};
	
	create_sortable_room_list('rooms_personal');
	create_sortable_room_list('rooms_groupal');
	create_sortable_room_list('rooms_question');
	create_sortable_room_list('rooms_screen');
	
	$("#sort_room_personal").data("state", "draggable");
	$("#sort_room_groupal").data("state", "draggable");
	$("#sort_room_question").data("state", "draggable");
	$("#sort_room_screen").data("state", "draggable");
	
	Skt.ui.set_draggable_room_list = function(list_id) {
		$("#" + list_id).children("li").draggable({
			helper : "clone",
			appendTo : "body",
			revert : "invalid",
			revertDuration : 100,
			zIndex : 1000,
			start : function(e, ui) {
				if ( Skt.user.type == 'teacher' || ( $(ui.helper.context).data("type") != 'screen' && $(ui.helper.context).data("type") != "question" ) ) {
					var side = $(ui.helper.context.parentElement).data("side");
					Skt.ui.show_dropzones(side);
				}
			},
			stop : function(e, ui) {
				if ( Skt.user.type == 'teacher' || ( $(ui.helper.context).data("type") != 'screen' && $(ui.helper.context).data("type") != "question" ) )
					Skt.ui.hide_dropzones();
			},
		});
	
		$("#" + list_id).children("li").droppable({
			hoverClass : "room-hover",
			accept : '.room',
			drop : function(event, ui) {
				var roomId_copy = ui.draggable.data("room");
				var roomId_paste = $(this).data("room");
				setTimeout(function() {
					Skt.sketchpad.copyRoom(roomId_copy);
					Skt.sketchpad.pasteRoom(roomId_paste);
				}, 4);
				Skt.delete_action = 1;
			}
		});
	};
	
	Skt.sketchpad.on('addCanvas', function(data) {
		var type = data.type;
		// si el estado es draggable se actualiza la propiedad
		// draggable en la lista de rooms correspondiente
		if ( type == "groupal" ) {
			var group = data.room.getRoomList().getGroup();
			Skt.ui.set_draggable_room_list('rooms-groupal-' + group.getId());
		} else {
			switch (type) {
			case "personal":
				if ($("#sort_room_personal").data("state") == "draggable")
					Skt.ui.set_draggable_room_list("rooms_personal");
				break;
	//		case "groupal":
	//			if ($("#sort_room_groupal").data("state") == "draggable")
	//				Skt.ui.set_draggable_room_list("rooms_groupal");
	//			break;
			case "question":
				if ($("#sort_room_question").data("state") == "draggable")
					Skt.ui.set_draggable_room_list("rooms_question");
				break;
			case "screen":
				if ($("#sort_room_screen").data("state") == "draggable")
					Skt.ui.set_draggable_room_list("rooms_screen");
				break;
			}
		}
	});
	
	$("#sort_room_personal, #sort_room_groupal, #sort_room_screen, #sort_room_question").click(function() {
		var listid = $(this).data("listid");
		var state = $(this).data("state");
		if ( !state ) {
			state = "draggable";
		}
		if (state == "draggable") {
			Skt.ui.remove_draggable_room_list(listid);
			Skt.ui.enable_sortable_room_list(listid);
			$(this).data('state', "sortable");
			$(this).addClass("btn-selected");
			$("#" + listid).addClass("sorting");
	
		} else {
			Skt.ui.disable_sortable_room_list(listid);
			Skt.ui.set_draggable_room_list(listid);
			$(this).data('state', "draggable");
			$(this).removeClass("btn-selected");
			$("#" + listid).removeClass("sorting");
		}
	});
}

